import classNames from 'classnames'
import React, { ReactNode } from 'react'

export const SliderMain = ({
  className,
  children
}: {
  className?: string
  children: ReactNode
}) => {
  return (
    <div className={classNames('col-span-12 md:col-span-8', className)}>{children}</div>
  )
}

export const SliderBar = ({
  className,
  children
}: {
  className?: string
  children: ReactNode
}) => {
  return (
    <div className={classNames('col-span-12 md:col-span-4 sticky top-header-h-pc h-fit', className)}>{children}</div>
  )
}

export const Slider = ({
  className,
  children
}: {
  className?: string
  children: ReactNode
}) => {
  return (
    <div className={classNames('grid grid-cols-12 gap-x-floor-gap-x md:gap-x-floor-gap-x-md gap-y-floor-gap-y md:gap-y-floor-gap-y-md', className)}>{children}</div>
  )
}